import React, { useState, useEffect } from "react";
import { FieldTimeOutlined } from "@ant-design/icons";
import { Avatar } from "antd";
import dayjs from "dayjs";

import "./index.less";

const logo = require("../../assets/images/logo.png");

const App = () => {

  const [dateTime, setDateTime] = useState("");
  const [schoolName, setSchoolName] = useState("");
  const [header, setHeader] = useState("");

  useEffect(() => {
    info();
  }, []);

  useEffect(() => {
    init();
  }, [dateTime]);

  const info = () => {
    setSchoolName("武汉理工校医院驾驶舱数据看板");
    setHeader("武汉理工大学智慧后勤驾驶舱");
  }

  const init = () => {
    const dateTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
    const timerId = setTimeout(() => setDateTime(dateTime), 1000)
    return () => clearTimeout(timerId)
  }

  return (
    <div className="app-header">
      <div className="header-left">
        <Avatar size={50} src={logo} alt="logo" />&nbsp;
        { schoolName } 
      </div>
      <div className="header-content">{ header }</div>
      <div className="header-right">
        <FieldTimeOutlined style={{ fontSize: 26 }} /> &nbsp;
        <div className="time">{ dateTime }</div>
      </div>
    </div>
  );
}

export default App;


